<template>
  <div v-for="(v, i) in friendList" :key="i">
    <el-popover placement="left-start" :width="260" trigger="hover">
      <template #reference>
        <div
          class="flex items-center ml-5 pl-10 mb-5 cursor-pointer"
          @click="toChat(v, i)"
        >
          <el-avatar class="mr-15" :src="v.avatar" icon="UserFilled" />
          <div class="text-sm">
            {{ v.nickName }}
          </div>
        </div>
      </template>
      <template #default>
        <div
          class="card-bg"
          :style="{ backgroundImage: 'url(' + v.avatar + ')' }"
        >
          <div class="card text-white px-15 py-20">
            <div class="text-2xl mb-5">
              {{ v.nickName }}
            </div>
            <div>
              {{ v.intro }}
            </div>
          </div>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import IndexService from "@/service/IndexService";
import Utils from "@/utils";
import { reactive } from "vue";

import { useRouter } from "vue-router";
let router = useRouter();

let personalData = Utils.getSession("personalData");

let friendList: any = reactive([]);

/* 获取用户好友 */
const getUserFriends = async () => {
  let data = {
    userId: personalData[0].id,
  };
  var a = await IndexService.getUserFriends(data);
  if (a.data.code > 0) {
    Utils.cloneArray(a.data.data, friendList);
  } else {
  }
};

getUserFriends();

/* 跳转到聊天 */
let toChat = (row: any, _index: number) => {
  console.log(row);

  router.push({
    path: "/chat",
    query: {
      friendList: JSON.stringify(row),
    },
  });
};
</script>

<style lang="sass" scoped>
.card-bg
  // background-size: cover
  background-position: center
  /* Glassmorphism card effect */
  .card
    backdrop-filter: blur(20px) saturate(144%)
    -webkit-backdrop-filter: blur(20px) saturate(144%)
    background-color: rgba(232, 231, 231, 0.3)
    // border-radius: 12px
    border: 1px solid rgba(209, 213, 219, 0.3)
</style>